<style scoped>
.main{
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 80%;
    width: 90%;
    background-color: aliceblue;
    margin-left: 5%;
    margin-right: 5%;
    align-items: center;
}
span{
    display: inline-block;
    font-size: 25px;
    margin: 5px;
}
</style>

<template>
    <div>
        <v-nav-top/>
        <div class="main">
            <h1 style="font-size:45px">Hello,{{form.lastname}}</h1>
            <span>MY EMAIL: {{form.email}}</span>
            <span>MY PHONE: {{form.phone}}</span>
            <span>MY COUNTRY: {{form.country}}</span>
            <span>MY CITY: {{form.city}}</span>
            <span>MY ADDR1: {{form.addr1}}</span>
            <span>MY ADDR2: {{form.addr2}}</span>
            <v-dialog :form="form"/>
        </div>
    </div>
</template>

<script>
import nav from '@/components/nav.vue'
import changeInfoDialog from '@/components/user/changeInfoDialog.vue'
export default {
    name: 'mine',
    components: {
        'v-nav-top': nav,
        'v-dialog': changeInfoDialog
    },
    data() {
        return{
            form: {
                lastname: '',
                email: '',
                phone: '',
                country: '',
                city: '',
                addr1: '',
                addr2: '',
            },
            dialogFormVisible: false
        }
    },
    mounted(){
        this.form.lastname = sessionStorage.getItem("lastname")
        this.form.email = sessionStorage.getItem("email");
        this.form.phone = sessionStorage.getItem("phone");
        this.form.country = sessionStorage.getItem("country");
        this.form.city = sessionStorage.getItem("city");
        this.form.addr1 = sessionStorage.getItem("addr1");
        this.form.addr2 = sessionStorage.getItem("addr2")
    },
    methods:{
        
    }
}
</script>